<template>
  <div class="echart-part">
    <echart-title :title="para.title"></echart-title>
    <div :id="para.id" class="echart_content" style=""></div>
  </div>
</template>

<script>
  const echarts = require("echarts");
  import statService from '@/api/stat/stat'
  import echartTitle from '../common/echart-title'
  import {echartsOption} from "./echarts-option";
  import {data} from "./date";

  // let option=echartsOption
  let myChart;
  export default {
    name: "hour-data",
    props: {
      para: {}
    },
    components:{
      echartTitle
    },
    data() {
      return {
        // new: [false, false],
        // reload: false,
        option: echartsOption,
        hours: [],
        countIn: [],
        countOut: [],
        timer: ""
      }
    },
    mounted() {
      this.getData()
    },
    beforeDestroy() {
      if (this.timer) { //如果定时器还在运行 或者直接关闭，不用判断
        clearInterval(this.timer); //关闭
      }
    },
    watch: {
    },
    methods: {
      getData() {
        let me=this

            me.draw();
            let maxLength=16
        let xAxisData=[1,2,3,4,5,6,7,8,9]
        let data=[
          [10,20,25,43,35,66,17,0,50,40],
          [100,20,130,140,50,160,70,80,190]
        ]
        // let data=[1,2,3,4,5,6,7,8,9,10,11,12,13,14,15,16]
            if(xAxisData.length>maxLength){
              //当数组长度大于16时，开启动画
              let count=0
              let range=xAxisData.length-maxLength
              let xAxisDataNew=_.slice(xAxisData,count,maxLength+count)
              let dataFirstNew=_.slice(data[0],count,maxLength+count)
              let dataSecNew=_.slice(data[1],count,maxLength+count)
              me.setEchartOption(xAxisDataNew,dataFirstNew,dataSecNew)
              setInterval(function () {
                if(count<range){
                  count++
                }else{
                  count=0
                }
                xAxisDataNew=_.slice(xAxisData,count,maxLength+count)
                dataFirstNew=_.slice(data[0],count,maxLength+count)
                dataSecNew=_.slice(data[1],count,maxLength+count)
                me.setEchartOption(xAxisDataNew,dataFirstNew,dataSecNew)

              },1000)

            }else{
              me.setEchartOption(xAxisData,data[0],data[1])
            }

      },
      setEchartOption(xAxisDataNew,dataFirstNew,dataSecNew){
        myChart.setOption(

          { xAxis:{
              data:xAxisDataNew
            },
            series: [
              {
                data: dataFirstNew
              },{
                data: dataSecNew
              }
            ]
          }
        )
      },
      draw() {
        let div = document.getElementById(this.para.id)
        if (!myChart || !div.innerHTML) {
          myChart = echarts.init(document.getElementById(this.para.id));
        }
        myChart.setOption(this.option)
        // this.showTip(myChart);
        window.addEventListener("resize", () => myChart.resize(), false);
      },
      showTip(myChart) {
        // 动态显示tootip
        var faultByHourIndex = 0; //播放所在下标
        setInterval(function () { //使得tootip每隔三秒自动显示
          myChart.dispatchAction({
            type: 'showTip', // 根据 tooltip 的配置项显示提示框。
            seriesIndex: 0,
            dataIndex: faultByHourIndex
          });
          faultByHourIndex++;
          // faultRateOption.series[0].data.length 是已报名纵坐标数据的长度
          if (faultByHourIndex > faultRateOption.series[0].data.length) {
            faultByHourIndex = 0;
          }
          if (faultByHourIndex > faultRateOption.series[1].data.length) {
            faultByHourIndex = 0;
          }
          if (faultByHourIndex > faultRateOption.series[2].data.length) {
            faultByHourIndex = 0;
          }
        }, 1000);
      },
    }
  }
</script>

<style scoped>


</style>
